<template>
  <div class="container">
    <navigate>填写申诉找回</navigate>
    <div class="container_main">
      <van-cell-group class="input_outer">
        <van-field v-model="appeal.user" label="*账号" placeholder="请输入申诉的账号" />
      </van-cell-group>
      <van-cell-group class="input_outer">
        <van-field v-model="appeal.reason" label="*找回理由" placeholder="请输入" />
      </van-cell-group>

      <div class="department">所属单位及部门</div>
      <!-- 区域 -->
      <van-cell-group class="input_outer">
        <van-field readonly clickable label="*所在区域" :value="currentArea" placeholder="选择区域"
          @click="visibleArea = true" />
        <van-popup v-model="visibleArea" round position="bottom" close-on-click-overlay @click-overlay="resetArea">
          <van-cascader v-model="tempArea" active-color="#36bfff" :options="areaList" @close="resetArea"
            @finish="selectArea" />
        </van-popup>
        <img src="@/assets/images/common/right.png" class="right vertical_center" alt="" />
      </van-cell-group>
      <!-- 单位 -->
      <van-cell-group class="input_outer">
        <van-field readonly clickable label="*所属单位" :value="currentUnit.name" placeholder="选择单位" @click="checkUnit" />

        <van-popup v-model="visibleUnit" round position="bottom" close-on-click-overlay @click-overlay="resetUnit">
          <van-picker title="选择单位" show-toolbar value-key="name" :columns="unitList" @confirm="selectUnit"
            @close="resetUnit" @cancel="visibleUnit = false" />
        </van-popup>

        <img src="@/assets/images/common/right.png" class="right vertical_center" alt="" />
      </van-cell-group>

      <van-cell-group class="input_outer">
        <van-field readonly clickable label="*所属部门" :value="currentDepartment" placeholder="选择部门"
          @click="checkDepartment" />
        <van-popup v-model="visibleDepartment" round position="bottom" close-on-click-overlay
          @click-overlay="resetDepartment">
          <van-cascader v-model="currentDepartment" active-color="#36bfff" :options="departmentList"
            @close="resetDepartment" @finish="selectDepartment" />
        </van-popup>
        <img src="@/assets/images/common/right.png" class="right vertical_center" alt="" />
      </van-cell-group>
      <div class="text">
        为防止账号被恶意找回，您提交的找回账号需与账号所在区域、单位、部门相对应才可正常提交申诉。
      </div>
      <button class="btn" @click="appealOperate">提交申请</button>
    </div>
  </div>
</template>

<script>
import selectMixin from "@/mixins/selectMixin";
import { apiUserAppeal } from "@/api/user";
export default {
  mixins: [selectMixin],
  data() {
    return {
      appeal: {
        user: "",
        reason: "",
        id: "",
      },
    };
  },
  methods: {
    async appealOperate() {
      if (!this.appeal.user) return this.$toast.fail("请输入账号！");
      if (!this.appeal.reason) return this.$toast.fail("请输入找回理由！");
      if (!this.province_id && !this.city_id && !this.area_id)
        return this.$toast.fail("请选择区域！");
      if (!this.department) return this.$toast.fail("请选择部门！");
      if (!this.currentUnit.id) return this.$toast.fail("请选择单位!");
      const params = {
        username: this.appeal.user,
        appeal_reason: this.appeal.reason,
        unit_id: this.currentUnit.id,
        province_id: this.province_id,
        city_id: this.city_id,
        area_id: this.area_id,
        department_id: this.department,
      };
      let res = await apiUserAppeal(params);
      if (res.code == 200) {
        this.$toast.success("密码申诉提交成功！");
        this.$router.push("/");
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>
